<template>
	<view class="container">
		<scroll-view class="scroll-conter" scroll-y="true">
			<view class="section">
				<text class="section-title">泉州风光</text>
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
					<swiper-item style="background-color: #808080;">
						<image src="/static/city1.png" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.jpg" style="width: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="section">
			        <text class="section-title">泉州介绍</text>
			        <text class="section-desc">海丝之路起点·泉州</text>
			        <text class="section-content">历史上泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期曾被誉为“东方第一大港”。</text>
			        <text class="section-content">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
			        <text class="section-content">特色文化：拥有<text style="color: blue">南音、水密隔舱福船制造</text>等丰富的非物质文化遗产。</text>
			</view>
			<view class="section">
			        <text class="section-title">探索进度</text>
			        <progress percent="65" show-info="true" stroke-width="6" active="true"></progress>
			</view>
			<view class="section">
			        <text class="section-title">选择城市</text>
			        <picker mode="region" :value="region" @change="onRegionChange">
			          <view class="picker-text">当前选择: {{ region[0] }}·{{ region[1] }}·{{ region[2] }}</view>
			        </picker>
			</view>
			<view class="section">
			        <text class="section-title">泉州宣传</text>
			        <video class="video" :src="videoUrl" controls="true" poster="https://via.placeholder.com/300x200"></video>
					<button class="video-btn" @click="toggleAudio">
					{{isAudioPlaying ? '暂停音乐' : '播放音乐'}}
					</button>
			        <text class="section-title">偏好设置</text>
			        <text class="radio-title">出行方式</text>
			        <radio-group @change="onRadioChange">
			          <label class="radio-item" v-for="(item, index) in radioList" :key="index">
			            <radio :value="item.value" :checked="item.checked"></radio>
			            <text>{{ item.label }}</text>
			          </label>
			        </radio-group>
			        <view class="switch-item">
			          <text>显示推荐景点:</text>
			          <switch :checked="showRecommend" @change="onSwitchChange"></switch>
			        </view>
					<view class="item uni-column">
						<view class="title"></view>
						 <text>探索半径:km</text>
						<slider value="60" name="slider" show-value></slider>
					</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 region: ["福建省", "泉州市", "丰泽区"],
				 videoUrl: "/static/city-video.mp4",
				 radioList: [
				         { label: "公交", value: "bus", checked: true },
				         { label: "自驾", value: "car", checked: false },
				         { label: "步行", value: "walk", checked: false }
				       ],
				showRecommend: true,
				  sliderValue: 0.5
			}
		},
		methods: {
			playVideo() {
				const videoContext = uni.createVideoContext("myVideo", this);
			    videoContext.play();
			    },
			onRadioChange(e) {
				this.radioList.forEach(item => {
				item.checked = item.value === e.detail.value;
				});
			},
			onSwitchChange(e) {
			      this.showRecommend = e.detail.value;
			},
			onSliderChange(e) {
			      this.sliderValue = e.detail.value;
			}
		}
	}
</script>

<style>
.container{
	width: 500px;
	margin: 10px auto;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 0 0 10px rabe(0,0,0,0.1);
}
.scroll-view {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 100%;
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
}
.section {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}
.section-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.section-desc {
  font-size: 25rpx;
  color: #666;
  display: block;
  margin-bottom: 15rpx;
}
.section-content {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.progress {
  margin-top: 20rpx;
}
.picker-text {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
}
.video {
   width: 100%;
   height: 300rpx;
   margin: 10rpx 0;
 }
 .video-btn {
   margin: 10rpx 0;
   background-color: #007aff;
   color: #fff;
 }
 .radio-title {
   font-size: 30rpx;
   font-weight: bold;
   display: block;
   margin: 20rpx 0 10rpx;
 }
 .radio-item {
   display: flex;
   align-items: center;
   margin-right: 30rpx;
   font-size: 28rpx;
 }
 .switch-item, .slider-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 20rpx 0;
   font-size: 28rpx;
 }
 .item uni-column{
	 width: 60px;
	 height: 40px;
 }
</style>
